<template>
  <div class="dpImdex">
    <!-- 顶部 -->
    <div class="dpTopIndex">全市特色产业集群分布图</div>
    <div class="topRightTime">
      {{year}}<span>年</span>
      {{month}}<span>月</span>
      {{date}}<span>日</span>
      {{hours}}<span>:</span>
      {{minutes}}<span>:</span>
      {{seconds}}
      <img src="@/assets/img/u696.png" class="refresh" @click="loginOut"/>
    </div>
    <a-row style="margin-top:36px;display:flex">
      <!-- 左侧 -->
      <a-col :md="8" class="dpc">
        <div class="timeRefsh" @click="refreshTime">
          更新时间: {{refreshTimeNow}}
          <img src="@/assets/img/u697.png" class="refresh"/>
        </div>
        <div class="leftTop topText" style="margin-bottom:10px">
          <div class="selectBox">
            <div :class="[active=='1'?'selectActive':'','selectBoxItem']" @click="active='1'">集群概况</div>
            <div :class="[active==index+2?'selectActive':'','selectBoxItem']" v-for="(item,index) in dictList" :key="index" @click="newList(item,index)">{{item.title}}</div>
          </div>
          <template v-if="active=='1'">
            <div class="jiQunBox">
              <div class="amate">
                <div>
                  <div>
                      截至目前，全市纳入统计的特色产业集群共27个，涵盖家具建材、装备制造、食品、服装纺织、电子信息、生物医药、现代商贸物流、有色金属冶炼和压延加工、文化等9个行业。2024年，实现营业收入3996亿元，同比增长9.5%；上缴税金89亿元，同比增长21.1%。其中，7个省级重点产业集群实现营业收入2247.2亿元（占全省6.2%），占全市集群营收的56.2%，上缴税金31.6亿元（占全省3.6%）。
                  </div>
                  <div>
                    <span>一是营收规模近4000亿。</span>2024年，全市27个特色产业集群共培育企业19900余家，累计实现营业收入3996亿元，同比增长9.5%，规模接近4000亿元，较2020年实现了翻番。其中：超500亿集群2个，分别为文安绿色低碳建材（人造板）产业集群（909.6亿元）、霸州特色定制家具产业集群（517.7亿元）；100-500亿集群9个、50亿元-100亿集群10个，50亿元以下集群6个。
                  </div>
                  <div>
                   <span>二是实现县域全覆盖。</span> 经过多年沉淀，目前各县涌现出一批小而特、小而优的生产群体和特色产业，构筑起“一县一业”，县县都有特色产业集群的发展格局。其中：三河（高端精密机械、都市食品、新一代电子信息、生物医药和大健康）、永清（核雕、服装创新设计、通用机械零部件、新型建筑材料）、固安（电子信息（新型显示）、生物医药健康、航空航天零部件、现代商贸物流）各4个，大城（绿色循环金属、绝热节能材料、红木文化）、霸州（特色定制家具、都市休闲食品、小家电）3个，大厂（高端装备零部件加工制造、都市食品）、文安（绿色低碳建材（人造板）、汽车配件）、开发区（新一代信息技术、新动能汽车零部件）各2个，香河（智慧家居）、广阳（管道装备制造）、安次（智能网联汽车）各1个。
                  </div>
                  <div>
                   <span> 三是7个纳入省重点。</span> 大城绿色循环金属、大城绝热节能材料、大城红木文化、霸州特色定制家具、文安绿色低碳建材（人造板）、香河智慧家居、固安电子信息（新型显示）等7个集群列为省级重点特色产业集群（全省107个），数量位列全省第7位。7个集群2024年实现营业收入2247.2亿元，同比增长13.9%，7个集群占全市集群营收的56.2%；上缴税金31.6亿元，同比增长7.5%。另外，大城绝热节能材料、固安电子信息（新型显示）、三河高端精密机械、文安绿色低碳建材（人造板）争创省级中小企业特色产业集群，数量位居全省第6位。
                  </div>
                  <div>
                   <span>四是成为县域经济关键支撑。</span>  2024年，全市27个特色产业集群上缴税金89亿元，同比增长21.1%；从业人员达42.5万人，同比增长8.9%。目前，共有四上企业853家，数量增长32.9%。初步估算，县域特色产业集群贡献了所在县域30%以上的GDP，30%以上的财政收入，40%以上城镇劳动就业，已成为县域经济发展的重要支撑。
                  </div>
                  <div>
                   <span> 五是科技创新能力突出。</span> 在技术标准方面，集群内企业累计制修订各类标准153项，拥有专利2689件，建议省级以上研发平台176个，28家"领跑者"企业的技术和产品填补国内空白，16家企业突破"卡脖子"技术。如，三河新宏昌在专用车制造领域、固安翌光科技在OLED显示技术方面均取得重大进展。此外，廊坊市积极推动产学研合作，成立京津冀国家技术创新中心燕郊中心，组建省、市两级科技特派团，与清华大学、天津大学、中国科学院电工研究所等29家国内知名高校、科研院所及省属骨干高校的150名专家、教授建立了紧密的合作关系，开展"科技成果直通车"活动，转化科技成果200项。
                  </div>

                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="tablelist">
                <vue-seamless-scroll :class-option="defaultOption" :data="consultList" :auto-play="autoPlay">
                    <table style="width:100%">
                        <tbody>
                            <tr v-for="(list,index) in consultList" :key="index" >
                                <td :data-contents="list.title" :data-names="list.title">
                                    <div class="d-cell" style="color:#fff" @click="showPop(list)">
                                        <div class="leftContent">{{list.title}}</div>
                                        <div class="rightIcon">{{list.createTime?moment(list.createTime).format('YYYY-MM-DD'):''}}</div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </vue-seamless-scroll>
            </div>
          </template>
        </div>
        <div class="leftTop leftBottom" style="margin-bottom:10px">
          <div class="topTitle">省级重点特色产业集群主要经济指标{{name2}}</div>
          <dv-scroll-board :config="config" style="width: 100%; height: 300px;"/>
        </div>
        <div class="leftTop leftBottom" style="height:280px">
          <div class="topTitle">省级非重点特色产业集群主要经济指标{{name2}}</div>
          <dv-scroll-board :config="config1" style="width: 100%; height: 220px;"/>
        </div>
      </a-col>
      <!-- 中间 -->
      <a-col :md="8" class="dpcenter">
          <echartsCenter ref="echartsCenter"/>
      </a-col>
      <!-- 右侧 -->
      <a-col :md="8" class="dpc">
        
        <div class="leftTop topBox" style="height:398px">
          <div class="before" @click="btnClick(1)"></div>
          <div class="after" @click="btnClick(2)"></div>
          <div class="topTitle">特色产业集群高质量发展指标体系</div>
          <!-- <div class="selectTitleBox">
            <div class="selectItem" :class="index==selectIndex?'checkItem':''" v-for="(item,index) in topList" :key="index" @click="selectChange(index)">{{item.name}}</div>
          </div> -->
          <div class="topCContent">
            <div class="contentItem" v-for="(item,index) in topList" :key="index" @click="showModel(item)">
              <div>{{item.companyCount||0}}</div>
              <div class="centerImg">
                <img src="@/assets/img/single.png" class="itemImg"/>
                <img src="@/assets/img/wave.png" class="fixedImg"/>
              </div>
              <span class="headNan">{{item.name}}</span>
            </div>
          </div>
        </div>
        <div class="leftTop topBox" style="height:252px">
          <div class="topTitle">全市特色产业集群历年营收税金柱状图</div>
          <div style="height: calc(100% - 52px)">
            <echartsBar ref="echartsBar"/>
          </div>
        </div>
        <div class="leftTop leftBottom" style="height:310px" v-if="companyDictInfo&&companyDictInfo.length>0">
          <div class="topTitle">{{name}}</div>
          <div class="title">{{companyDictInfo[1].label}}</div>
          <div class="number">
            <!-- industrStatistics.clusterCount -->
            <span class="numberCount">{{companyDictInfo[1].value}}</span>
            <span class="numUnit">个</span>
          </div>
          <div class="number number2">
            <div>
              <!-- {{industrStatistics.companyCount}} -->
              <span class="numberCount" style="color:rgb(205,133,45)">{{companyDictInfo[2].value}}</span>
              <span>个</span>
            </div>
            <div>
              <!-- {{industrStatistics.yysr}} -->
              <span class="numberCount" style="color:rgb(122,3,239)">{{companyDictInfo[3].value}}</span>
              <span>亿元</span>
            </div>
            <div>
              <!-- {{industrStatistics.sjsj}} -->
              <span class="numberCount" style="color:rgb(29,249,252)">{{companyDictInfo[4].value}}</span>
              <span>亿元</span>
            </div>
            <div>
              <!-- {{industrStatistics.cyrs}} -->
              <span class="numberCount" style="color:rgb(186,186,3)">{{companyDictInfo[5].value}}</span>
              <span>人</span>
            </div>
          </div>
          <div class="number number2">
            <div class="relativeBTN">
              <div class="text">{{companyDictInfo[2].label}}</div>
              <img src="@/assets/img/bg.png" class="itemBg"/>
              <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
            </div>
            <div class="relativeBTN">
              <div class="text">{{companyDictInfo[3].label}}</div>
              <img src="@/assets/img/bg.png" class="itemBg"/>
              <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
            </div>
            <div class="relativeBTN">
              <div class="text">{{companyDictInfo[4].label}}</div>
              <img src="@/assets/img/bg.png" class="itemBg"/>
              <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
            </div>
            <div class="relativeBTN">
              <div class="text">{{companyDictInfo[5].label}}</div>
              <img src="@/assets/img/bg.png" class="itemBg"/>
              <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-modal v-model="visible" @ok="visible=false" :footer="null" :title="selectPopInfo.title" width="1000px">
      <div v-html="content"></div>
    </a-modal>
    <a-modal v-model="visible2" @ok="visible2=false" :footer="null" :title="null" width="1000px" >
      <div class="itemModel">
        <!-- <div class="line">廊坊市集群内{{jiqunName}}中小企业名单</div> -->
        <div class="line titleLine">
          <div class="xuhao">序号</div>
          <div class="mingcheng">集群名称</div>
          <div class="xian">县（市、区）</div>
          <div class="jiqun">{{jiqunName}}企业数量（个）</div>
        </div>
        <template v-if="popCompanyList.length>0">
          <div class="scrollMax">
            <div class="line" v-for="(item,index) in popCompanyList" :key="index">
              <div class="xuhao">{{index+1}}</div>
              <div class="mingcheng">{{item.cname}}</div>
              <div class="xian">{{item.aname}}</div>
              <div class="jiqun">{{item.companyCount}}</div>
            </div>
          </div>
     
        </template>
        <template v-else>
          <div class="line titleLine" style="height:300px;">
              <div>暂无数据!</div>
          </div>
         
        </template>
        
      </div>
    </a-modal>
  </div>
</template>
<script>
  import moment from 'moment'
  import { mapActions, mapGetters,mapState } from 'vuex'
  import { getAction } from '@/api/manage'
  import echartsCenter from './echartsCenter'
  import echartsBar  from "./echartsBar";
  export default {
    components:{echartsCenter,echartsBar},
    data () {
      return {
        autoPlay:false,
        selectTop:[
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
        ],
        list:[
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
          {title:'科技创新发展'},
        ],
        selectIndex:0,
        refreshTimeNow:'',
        config: {
            headerBGC: "revert",
            oddRowBGC: 'revert',
            evenRowBGC: 'revert',
            color:'#28dff1',
            header: ["特色产业集群名称", "企业数量", "营业收入(亿元)", "上缴税金(亿元)", "从业人员(人)"],
            rowNum: 5,
            headerHeight: 40,
            columnWidth: [190,80],
            align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
            data: [],
        },
        config1:{},
        timer:null,
        year:'',
        month:'',
        date:'',
        hours:'',
        minutes:'',
        seconds:'',
        industrStatistics:{},
        industryList:[],
        topList:[],
        allList:[],
        page:1,
        active:'1',
        defaultOption: {
            // step: 0.5, // 数值越大速度滚动越快
            // limitMoveNum:3, // 开始无缝滚动的数据量 this.dataList.length
            hoverStop: true, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            singleHeight: 40,
        },
        consultList:[],
        visible:false,
        selectPopInfo:{},
        content:'',
        dictList:[],
        name:'',
        name2:'',
        companyDictInfo:[],
        jiqunName:'',
        visible2:false,
        popCompanyList:[],
        url:{
          queryIndClusterStatistics:'indust/indCluster/queryIndClusterStatistics',
          queryIndClusterList:'indust/indCluster/queryIndClusterList',
          queryDpStatistics:'indust/indTag/queryDpStatistics',
          indClusterList:'indust/indCluster/list',
          newList:'indust/indNews/list',
          getIndClusterSort:'indust/indJqsj/getAll',
          selectCompanyCountListByTagid:'bs/indClusterTag/selectCompanyCountListByTagid'
        }
      }
    },
    created () {
      this.refreshTimeNow = moment(new Date()).format('YYYY-MM-DD')
      var _this = this;
      this.timer = setInterval(function() {
        let timeNo = new Date()
        _this.year = (timeNo).getFullYear()
        _this.month = (timeNo).getMonth() + 1
        _this.date = (timeNo).getDate()
        _this.hours = (timeNo).getHours()
        _this.minutes = (timeNo).getMinutes()
        _this.seconds = (timeNo).getSeconds()
      }, 1000);
      this.queryIndClusterStatistics()
      this.queryIndClusterList(1)
      this.queryIndClusterList(0)
      this.queryDpStatistics()
      this.indClusterList()
      this.getIndClusterSort()
      this.getDict()
      this.getDict2()
      this.getDict3()
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods:{
      moment,
      ...mapActions(["Logout"]),
      showModel(item){
        this.jiqunName = item.name
        getAction(this.url.selectCompanyCountListByTagid,{tagId:item.id,pageSize:100000}).then(res=>{
          if(res.success){
            this.visible2 = true;
            this.popCompanyList = res.result
          }else{
          }
        })
      },
      getDict3(){
        getAction('sys/dict/getDictItems/dp_name2',{}).then(res=>{
          if(res.success){
            this.name2 = res.result[0].label
          }else{

          }
        })
      },
      // 获取特色产业集群
      queryIndClusterStatistics() {
        getAction(this.url.queryIndClusterStatistics).then(res=>{
          if(res.success){
            this.industrStatistics = res.result
            // this.industrStatistics.clusterCount = res.result.clusterCount?this.numToArray(res.result.clusterCount):[]
            // // 企业数量
            // this.industrStatistics.companyCount = res.result.companyCount?this.numToArray(res.result.companyCount):[] 
            // // 营业收入
            // this.industrStatistics.yysr = res.result.yysr?this.numToArray(res.result.yysr):[] 
            // // 上缴税金
            // this.industrStatistics.sjsj = res.result.sjsj?this.numToArray(res.result.sjsj):[] 
            // // 从业人员
            // this.industrStatistics.cyrs = res.result.cyrs?this.numToArray(res.result.cyrs):[] 
          }else{

          }
        })
      },
      numToArray(num){
          var str = num + "";
          var resultArr = [];
          for(var i = 0; i < str.length; i++){
              resultArr.push(parseInt(str[i]))
          }
          return resultArr;
      },
      // 重点产业集群数量
      queryIndClusterList(isMajors) {
        getAction(this.url.queryIndClusterList,{isMajors}).then(res=>{
          if(res.success){
            let data = []
            res.result.forEach((item,index)=>{
              let itemData = [`<span style='padding-left:15px'>${item.name}</span>`,item.companyCount,item.yysr,item.sjsj,item.cyrs]
              data.push(itemData)
            })
            if(isMajors==1){
              this.config =  {
                  headerBGC: "revert",
                  oddRowBGC: 'revert',
                  evenRowBGC: 'revert',
                  color:'#28dff1',
                  header: ["特色产业集群名称", "企业数量", "营业收入(亿元)", "上缴税金(亿元)", "从业人员(万人)"],
                  rowNum: 5,
                  headerHeight: 40,
                  columnWidth: [170,80],
                  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
                  data: data,
              }
            } else {
              this.config1 =  {
                  headerBGC: "revert",
                  oddRowBGC: 'revert',
                  evenRowBGC: 'revert',
                  color:'#28dff1',
                  header: ["特色产业集群名称", "企业数量", "营业收入(亿元)", "上缴税金(亿元)", "从业人员(万人)"],
                  rowNum: 4,
                  headerHeight: 40,
                  columnWidth: [170,80],
                  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
                  data: data,
              }
            }
            
          }else{

          }
        })
      },
      queryDpStatistics(){
        getAction(this.url.queryDpStatistics).then(res=>{
          if(res.success){
            this.allList = res.result
            this.topList = this.allList.slice(0,8)
            this.page = 1
          }else{

          }
        })
      },
      indClusterList() {
        getAction(this.url.indClusterList,{pageNo:1,pageSize:100}).then(res=>{
            if(res.success){
              this.$refs.echartsCenter.ininMap(res.result.records)
            }else{

            }
          })
      },
      selectChange(index) {
        this.selectIndex = index
      },
      // 更新时间
      refreshTime() {
        this.refreshTimeNow = moment(new Date()).format('YYYY-MM-DD')
        this.queryIndClusterStatistics()
        this.queryIndClusterList(1)
        this.queryIndClusterList(0)
        this.queryDpStatistics()
        this.indClusterList()
      },
      btnClick(index) {
        let count = ''
        if(index==1) {
          if(this.page==1) {
            return
          }
          this.page--
          count = (this.page-1)*8
        } else {
          if(this.page>parseInt(this.allList.length/8)){
            return
          }
          this.page++
          count = (this.page-1)*8
        }
        this.topList = this.allList.slice(count,count+8)
      },
      newList(item,index) {
        this.active = index+2
        this.autoPlay = false
        getAction(this.url.newList,{pageSize:1000000,type:item.value}).then(res=>{
          if(res.success){
            this.consultList = res.result.records
            setTimeout(() => {
              this.autoPlay = true
            }, 3000);
          }else{

          }
        })
      },
      getIndClusterSort() {
        getAction(this.url.getIndClusterSort,{}).then(res=>{
          if(res.success){
            this.$refs.echartsBar.ininMap(res.result)
          }else{

          }
        })
      },
      getDict(){
        getAction('sys/dict/getDictItems/ind_news_type',{}).then(res=>{
          if(res.success){
            const newArray = res.result.filter(obj => Number(obj.value) <4)
           this.dictList = newArray
          }else{

          }
        })
      },
      getDict2(){
        getAction('sys/dict/getDictItems/dp_name',{}).then(res=>{
          if(res.success){
            this.name = res.result[0].label
            this.companyDictInfo = res.result

          }else{

          }
        })
      },
      showPop(item) {
        this.visible = true
        this.selectPopInfo = item
        this.content = item.content
      },
      // 退出登录
      loginOut() {
        const that = this
        this.$confirm({
          title: '提示',
          content: '真的要注销登录吗 ?',
          onOk() {
            return that.Logout({}).then(() => {
              window.location.reload()
            }).catch(err => {
              that.$message.error({
                title: '错误',
                description: err.message
              })
            })
          },
          onCancel() {
          },
        });
      }
    }
  }
</script>
<style lang="less" scoped>
.dpImdex{
  background:url('../../assets/img/u0_state0.jpg') center no-repeat;
  background-size: cover;
  overflow: hidden;
  // width:1920px;
  // height: 1080px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top:0%;
  left:0%;
  // transform: translate(-50%,-50%);
  overflow-y:scroll ;
  .topRightTime{
    position: absolute;
    top: 50px;
    right:10px;
    font-family: '300-CAI978 ', '300-CAI978', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #31A7FF;
    cursor: pointer;
    span{
      color:#fff;
      margin:0 10px 0 5px;
    }
  }
  .dpTopIndex{
    height: 57px;
    background:url('../../assets/img/u7 (1).png') center no-repeat;
    text-align: center;
    font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight:700;
    font-style:normal;
    color:#FFFFFF;
    font-size: 30px;
    line-height: 76px;
    position: relative;
    text-indent: -35px;
    &::after{
      content: '';
      width: 593px;
      height: 29px;
      position: absolute;
      bottom:-6px;
      left:50%;
      transform: translateX(-53%);
      background:url('../../assets/img/u8 (1).png') center no-repeat;
    }
  }
  .dpc{
    position: relative;
    .timeRefsh{
      position: absolute;
      top:-10px;
      right:10px;
      font-size: 14px;
      transform: translateY(-100%);
      color:rgba(128, 255, 255, 0.5058823529411764);
      cursor: pointer;
      .refresh{
        width: 16px;
        height: 16px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .leftTop{
    // background:url('../../assets/img/u347.png') center no-repeat;
    border:1px solid #2d8cf0;
    height: 522px;
    position: relative;
    width: 100%;
    .topTitle{
      height: 52px;
      background:url('../../assets/img/u348.png') center no-repeat;
      text-align: center;
      line-height: 52px;
      font-family: sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      color: rgb(255, 255, 255);
      border-width: 0px;
    }
    .selectTitleBox{
      margin:7px 20px;
      display: flex;
      gap:15px;
      overflow-x:scroll ;
      width: 95%;
      box-sizing: border-box;
      .selectItem{
        width:108px;
        height: 36px;
        line-height: 36px;
        font-family: 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #FFFFFF;
        cursor: pointer;
        text-align: center;
      }
      .checkItem{
        background:url('../../assets/img/u350_selected.png') center no-repeat;
        width: 108px;
      }
    }
    .topCContent{
      padding: 0 64px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 20px;
      .contentItem{
        width: calc((100% - 60px)/4);
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #66FFFF;
        font-size: 32px;
        text-align: center;
        cursor: pointer;
        .itemImg{
          // width: 84px;
          width: 50px;
          height: fit-content;
          position: relative;
          z-index: 2;
        }
        span{
          display: block;
          font-size: 14px;
          color: #ffffff;
        }
        .centerImg{
          position: relative;
          margin:0px 0 26px;
          .fixedImg{
            position: absolute;
            bottom:8px;
            left:50%;
            transform: translate(-50%,50%);
            animation: rotation 3s linear infinite;
          }
        }
        .headNan{
          height: 42px;
          display: flex;
          flex-direction: column;
          justify-content: start;
          text-align: center;
        }
      }
    }
    .tablelist{
      height: 400px;
      overflow: hidden;
      // padding:0 20px 0 30px;
      font-size: 15px;
      .d-cell{
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        position: relative;
        line-height: 40px;
        padding-left:20px;
        width: 100%;
        cursor: pointer;
        .rightIcon{
          height: 40px;
          width: 100px;
          vertical-align: middle;
          margin:0 0 0 10px;
          text-indent: 0;
        }
        .leftContent{
          flex:1;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: nowrap;
          text-indent: 0;
        }
        &::before{
          width: 11px;
          height: 11px;
          content:'';
          background: url('../../assets/img/tuoyuan.png');
          position: absolute;
          left:0px;
          top:50%;
          transform: translateY(-50%);
        }
      }
      .tupian{
          width: 584px;
          height: 239px;
      }
      .title{
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-size: 28px;
          color: #50FFFF;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          margin:10px 0;
      }
  }
  }
  .topBox{
    margin-bottom:10px;
    .before{
      content: '';
      position: absolute;
      top:57%;
      left:0px;
      width: 64px;
      height: 64px;
      transform: translateY(-50%);
      background:url('../../assets/img/u548.png') center no-repeat;
      cursor: pointer;
    }
    .after{
      content: '';
      position: absolute;
      top:57%;
      right:0px;
      width: 64px;
      height: 64px;
      transform: translateY(-50%) rotate(180deg);
      background:url('../../assets/img/u548.png') center no-repeat;
      cursor: pointer;
    }
  }
  .leftBottom{
    height: 339px;
    border:1px solid #2d8cf0;
    // background:url('../../assets/img/u550.png') center no-repeat;
    // background-size: cover;
    .title{
      font-size: 16px;
      color:#07a6ff;
      text-align: center;
      margin:10px 0 5px;
    }
    .number{
      display: flex;
      justify-content: center;
      color: #07a6ff;
      font-size: 13px;
      // line-height: 100px;
      .numberCount{
        width: 36px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-family: 'DIN Bold', 'DIN', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 48px;
        // color: #FFFFFF;
        margin-right: 10px;
        // background: rgb(13,67,121);
        //border:1px solid #07a6ff;
        border-radius: 4px;
      }
      .numUnit{
        padding:33px 0 20px 10px;
      }
    }
    .number2{
      gap: 10px;
      div{
        width: 150px;
        // text-align: right;
        text-align: center;
      }
      .relativeBTN{
        position: relative;
        padding-right: 0px;
        .itemCenter{
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          width:60px;
          height: 60px;
          animation: rotation2 3s linear infinite;
        }
        .text{
          font-size: 16px;
          color:#ffffff;
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          font-weight: 700;
          padding-right: 0;
          text-align: center;
          z-index: 2;
        }
      }
      .numberCount{
        width: 20px;
        height: 40px;
        line-height: 40px;
        // background: rgb(205,133,45);
        border:0;
        font-size: 28px;
      }
      .itemBg{
        width: 100px;
        height: 100px;
      }
    }
  }
}
.topText{
  color: #c8e8ff;
  font-size: 18px;
  padding:10px 32px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  height: 340px !important;
  // justify-content: center;
  div{
    text-indent: 48px;
    span{
      color:#f00;
    }
  }
  .selectBox{
    display: flex;
    padding-left:32px;
    margin:10px 0;
    z-index:2;
    position: relative;
    .selectBoxItem{
      width: 100px;
      text-align: center;
      color:#ffffff;
      border: 1px solid #2d8cf0;
      height: 40px;
      line-height: 38px;
      margin-right:10px;
      text-indent: 0;
      cursor: pointer;
    }
    .selectActive{
      background: #fff;
      color:#2d8cf0;
    }
    
  }
}
.jiQunBox{
  flex:1;
  overflow: hidden;
}
.amate{
  height: fit-content;
  animation: scrollBox 60s linear infinite;
  animation-delay:3s;
}

.scrollMax{
  max-height: 80vh;
  overflow-y: scroll;
}
.line{
    display: flex;
    text-align: center;
    height: 40px;
    border:1px solid #e8e8e8;
    border-bottom:0;
    text-align: center;
    justify-content: center;
    align-items: center;
    
    &:last-child{
        border-bottom:1px solid #e8e8e8;
    }
    div{
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right:1px solid #e8e8e8;
      &:last-child{
        border-right: 0;
      }
    }
    .xuhao{
      width:75px;
    }
    .xian{
      width:180px;
    }
    .jiqun{
      flex:1;
    }
    .mingcheng{
      flex:1;
    }
  }
.titleLine{
  width: calc(100% - 6px);
  &:first-child{
    border-bottom:1px solid #e8e8e8;
  }
}


@keyframes rotation {
 0% {
    width:30px;
    height: fit-content;
  }
  50%{
    width:60px;
    height: fit-content;
  }
  100% {
    width:30px;
    height: fit-content;
  }
}
@keyframes rotation2 {
 0% {
    transform: translate(-50%,-50%) rotate(0);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
@keyframes scrollBox {
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(-90%);
  }
}
</style>
<style>
.dv-scroll-board{
  color:#28dff1
}
</style>